<template>
      <div class="app-container">
        <!--主表信息-->
        <el-form :inline="true" v-loading="loading" class="modalform" label-width="150px" style="margin-bottom: 30px;">
          <el-form-item label="编号">
            <el-input class="modalinput" :value="farepay.code" readonly clearable/>
          </el-form-item>
          <el-form-item label="主体">
            <el-input class="modalinput" :value="farepay.orgname" readonly clearable/>
          </el-form-item>
          <el-form-item label="物流公司">
            <el-input class="modalinput" v-model="farepay.supplierName" readonly clearable style="padding-right: 0;width: 209px;"/>
          </el-form-item>
          <el-form-item label="部门">
            <el-input class="modalinput" v-model="farepay.departname" readonly clearable/>
          </el-form-item>
          <el-form-item label="物流单运费">
            <el-input class="modalinput" :value="attachUnit(farepay.applyAmount,' 元')" readonly clearable/>
          </el-form-item>
          <el-form-item label="其他费用">
            <el-input class="modalinput" :value="attachUnit(farepay.otheramount,' 元')" readonly clearable/>
          </el-form-item>
          <el-form-item label="付款总额">
            <el-input class="modalinput" :value="attachUnit(farepay.totalamount,' 元')" readonly clearable/>
          </el-form-item>
          <el-form-item label="银行">
            <el-input class="modalinput" v-model="farepay.bank" readonly clearable/>
          </el-form-item>
          <el-form-item label="银行账号">
            <el-input class="modalinput" v-model="farepay.bankCode" readonly clearable/>
          </el-form-item>
          <el-form-item label="状态">
            <el-input class="modalinput" v-model="farepay.statusname" readonly clearable/>
          </el-form-item>
          <el-form-item label="操作人">
            <el-input class="modalinput" v-model="farepay.operator" readonly clearable/>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-input class="modalinput" v-model="farepay.createtime" readonly clearable/>
          </el-form-item>
          <el-form-item label="附件" >
            <el-upload
              class="upload"
              action="/prod-api/common/upload"
              :on-preview="handlePreview"
              :disabled="true"
              :file-list="fileList">
            </el-upload>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-if="permission.includes(63) && farepay.status == -1"
            >添加物流订单</el-button>
          </el-col>
        </el-row>
        <!--明细列表-->
        <el-table :data="farepay.items" style="margin-bottom: 40px">
          <el-table-column label="物流单号" align="center" prop="wlinfoCode" >
            <template slot-scope="scope">
              <span style="color: #00afff;cursor: pointer;" @click="handleSettle(scope.row.wlinfoGuid)">{{scope.row.wlinfoCode}}</span>
            </template>
          </el-table-column>
          <el-table-column label="主体" align="center" prop="orgName" />
          <el-table-column label="物流公司" align="center" prop="customername" />
          <el-table-column label="车牌号" align="center" prop="carcode"/>
<!--          <el-table-column label="运价" align="center" prop="fareprice">-->
<!--            <template slot-scope="scope">-->
<!--              <span>{{ scope.row.fareprice + takePriceUnit(scope.row.farepricetype) }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="运费(元)" align="center" prop="wlamount"/>
          <el-table-column label="其他费用(元)" align="center" prop="othercost"/>
<!--          <el-table-column label="其他费用说明" align="center" prop="otherremark"/>-->
          <el-table-column label="总金额(元)" align="center" prop="totalamount"/>
          <el-table-column label="业务单号" align="center" prop="linkecodes" />
<!--          <el-table-column label="状态" align="center" prop="statusName"/>-->
          <el-table-column label="备注" align="center" prop="otherremark"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-if="permission.includes(63) && farepay.status == -1"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加物流订单 -->
        <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
          <!--筛选区域-->
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="主体">
                <el-input
                  :value="this.farepay.orgname"
                  disabled
                  clearable
                  style="width: 260px"
                />
            </el-form-item>
            <el-form-item label="物流公司">
              <el-input
                :value="this.farepay.supplierName"
                disabled
                clearable
                style="width: 260px"
              />
            </el-form-item>
            <el-form-item label="起止日期">
              <el-date-picker size="small" style="width: 200px" v-model="queryParams.startdate" type="date" value-format="yyyy-MM-dd" placeholder="选择开始日期">
              </el-date-picker>
              <el-date-picker size="small" style="width: 200px" v-model="queryParams.enddate" type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="wlinfoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="编号" align="center" prop="code" />
            <el-table-column label="主体" align="center" prop="orgname" />
            <el-table-column label="物流公司" align="center" prop="customername" />
            <!--      <el-table-column label="计价方式" align="center" prop="farepricetype" :formatter="farepricetypeFormat" />-->
<!--            <el-table-column label="运价" align="center" prop="fareprice" >-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ scope.row.fareprice + takePriceUnit(scope.row.farepricetype) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="重量(吨)" align="center" prop="fareweight" />-->
            <el-table-column label="金额(元)" align="center" prop="amount" />
            <el-table-column label="业务单号" align="center" prop="" >
              <template slot-scope="scope">
                <span>{{ takeLinkcode(scope.row.items) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createtime" >
              <!--        <template slot-scope="scope">-->
              <!--          <span>{{ scope.row.createtime. }}</span>-->
              <!--        </template>-->
            </el-table-column>
<!--            <el-table-column label="状态" align="center" prop="statusName" />-->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getWlinfos"
          />
          <div slot="footer" class="dialog-footer">
            <el-button :disabled="ids.length <= 0" type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <!--        物流订单结算信息-->
        <el-dialog :title="title" :visible.sync="open2" width="800px" append-to-body>
          <el-form ref="form2" :model="form2" :inline="true" label-width="120px">
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">主体</span>
              <span class="rj-text">{{form2.orgname}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">业务单号</span>
              <span class="rj-text">{{takeLinkcode(form2.items)}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">物流公司</span>
              <span class="rj-text">{{form2.customername}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">单价</span>
              <span class="rj-text">{{form2.fareprice}} {{form2.farepricetype == 1 ? '元/车' : '元/吨'}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">结算重量</span>
              <span class="rj-text">{{attachUnit(form2.fareweight, '吨')}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">运费</span>
              <span class="rj-text">{{attachUnit(form2.fareamount, '元')}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">其他费用</span>
              <span class="rj-text">{{attachUnit(form2.othercost, '元')}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">结算金额</span>
              <span class="rj-text">{{attachUnit(form2.amount, '元')}}</span>
            </div>
            <div class="rj-input" v-if="form2.faretypeName">
              <span class="rj-label" style="width: 140px;">结算方式</span>
              <span class="rj-text">{{form2.faretypeName}}</span>
            </div>
            <div class="rj-input">
              <span class="rj-label" style="width: 140px;">备注</span>
              <span class="rj-text">{{form2.otherremark}}</span>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel2">取 消</el-button>
          </div>
        </el-dialog>
      </div>
</template>

<script>
  import {getFarepay, addFarepDetail, delFarepDetail} from "@/api/wlinfo/farepay";
  import {getWlInfoList, getWlinfo} from "@/api/wlinfo/wlinfo";
  import variables from '@/assets/styles/variables.scss'
  import { getCurrPermis } from "@/api/public";

  export default {
    name: 'farepayinfo',
    components: {
    },
    data() {
      return {
        loading: true,
        loading2: true,
        loading4: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        open2: false,
        open4: false,
        // 表单参数
        form: {},
        form2: {},
        farepay: {},
        wlinfoList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orgid: null,
          customerid: null,
          functiontype: 18,
          status: 30,
          paystatus: 10
        },
        permission: [],
        fileList: []
      }
    },
    computed: {
      variables() {
        return variables;
      },
    },
    async created() {
      this.id = this.$route.query.id;
      this.getPermis();
      this.getFarepay();
      this.getWlinfos();
    },

    methods: {
      // 取消按钮
      cancel2() {
        this.open2 = false;
        this.reset2();
      },
      /** 结算按钮操作 */
      handleSettle(guid) {
        this.reset2();
        getWlinfo(guid).then(response => {
          this.reset2();
          this.form2 = response.data;
          this.open2 = true;
          this.title = `物流订单结算(编号：${this.form2.code})`;
        });
      },
      // 表单重置
      reset2() {
        this.form2 = {
          guid: null,
          code: null,
          wlguid: null,
          wlcode: null,
          customerid: null,
          customername: null,
          freightclaim: null,
          faretype: null,
          deliprovince: null,
          delicity: null,
          delidistrict: null,
          deliaddress: null,
          arriprovince: null,
          arricity: null,
          arridistrict: null,
          arriaddres: null,
          drivername: null,
          driverphone: null,
          carcode: null,
          delicontact: null,
          delicontacttel: null,
          arricontact: null,
          arricontactno: null,
          senddate: null,
          arrivedate: null,
          loadtime: null,
          unloadtime: null,
          fareprice: null,
          farepricetype: null,
          status: 0,
          amount: null,
          fareweight: null,
          type: null,
          operatorid: null,
          operator: null,
          createtime: null,
          lastupdate: null,
          approvalflag: null,
          containerno: null,
          deliport: null,
          arriport: null,
          othercost: null,
          otherremark: null,
          deductamount: null,
          deductremark: null,
          befdeductamount: null,
          transtype: null,
          flowid: null,
          relatedid: null,
          departid: null,
          departname: null,
          environment: null,
          lifttype: null,
          arriportcountry: null,
          transclause: null,
          remark: null,
          shipcompany: null,
          shipname: null,
          shipcode: null,
          liftcode: null,
          boxtype: null,
          boxsize: null,
          boxcode: null,
          delifactory: null,
          cargodate: null,
          cartype: null,
          mainidsea: null,
          kdcode: null,
          sort: null,
          hook: null,
          orgid: null,
          orgname: null,
          paystatus: null
        };
        this.resetForm("form2");
      },
      takeLinkcode(items) {
        if (!items) return;
        let txt = '';
        items.forEach((item, index) => {
          if (index == 0) {
            txt = txt.concat(item.linkcode);
          } else {
            txt = txt.concat(',' + item.linkcode);
          }
        })
      },
      getPermis() {
        getCurrPermis().then(response => {
          this.permission = response.data;
          console.log('this.permission:', this.permission)
        });
      },
      takeLinkcode(items) {
        if (!items) return;
        let txt = '';
        items.forEach((item, index) => {
          if (index == 0) {
            txt = txt.concat(item.linkcode);
          } else {
            txt = txt.concat(',' + item.linkcode);
          }
        })
        return txt;
      },
      /** 新增按钮操作 */
      handleAdd() {
        // this.reset();
        this.getWlinfos();
        this.open = true;
        this.title = "添加物流订单";
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.guid)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      takePriceUnit(fptype) {
        let txt = '';
        if (fptype == 1) {
          txt = '元/车';
        } else if (fptype == 2) {
          txt = '元/吨';
        }
        return txt;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getWlinfos();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleFareAdd(type) {
        // this.getRwCorps();
        this.fareApply.projId = this.farepay.id;
        this.fareApply.txnType = 2;
        this.title = '运费登记';
        this.open = true;
        // this.getCusOptions(this.fareApply.projId, this.fareApply.customerId);
      },
      handleFarePass() {

      },
      addFareApply() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // if (this.fareApply.amount <= 0) {
            //   this.msgInfo('金额不能为零小于零');
            //   return;
            // }
            // this.loading = true;
            // addFareApply(this.fareApply).then(response => {
            //   this.msgSuccess("登记成功");
            //   this.loading = false;
            //   this.open = false;
            //   this.fareApply = {};
            //   this.getProDetail();
            //   this.currLabel = 'fare';
            // });
          }
        })
      },
      cancel() {
        this.open = false;
        this.fareApply = {};
      },
      /** 查询运费支付 **/
      async getFarepay() {
        this.loading = true;
        await getFarepay(this.id).then(response => {
          this.loading = false;
          this.farepay = response.data;
          this.queryParams.customerid = this.farepay.supplierId;
          this.queryParams.orgid = this.farepay.orgguid;
          //files回显
          this.fileList = this.farepay.files.map(item => {
            return {
              id: item.guid,
              name: item.imagename,
              url: item.url
            }
          });
        });
      },
      /** 查询待结算物流订单 **/
      getWlinfos() {
        this.loading = true;
        getWlInfoList(this.queryParams).then(response => {
          console.log('response:', response)
          this.wlinfoList = response.rows;
          console.log('this.wlinfoList:', this.wlinfoList)
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 提交按钮 */
      submitForm() {
        let params = {
          farepayGuid: this.farepay.id,
          wlinfoids: this.ids.join(',')
        };
        addFarepDetail(params).then(response => {
            this.msgSuccess("添加成功");
            this.open = false;
            this.getFarepay()
          });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除该数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delFarepDetail(ids);
        }).then(() => {
          this.getFarepay()
          this.msgSuccess("删除成功");
        })
      },

      //上传相关
      handlePreview(file) {
        if (file.url) {
          let url = `http://${location.host}/prod-api${file.url}`;
          location.href = url;
        }
      },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`);
      // },
      // handleUpload(response, file, fileList) {
      //   if (response.code == 200) {
      //     this.fileList.push({id: response.id, name: response.originalName, url: response.url});
      //   }
      // },
      handleRemove(file, fileList) {
        this.fileList = this.fileList.filter(item => {
          return item.id != file.id;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }

  .app-wrapper > > > .el-input {
    color: #999;
  }

  .upload {
    /*margin-top: 20px;*/
  }

  .rj-input {
    display: inline-block;
    height: 26px;
    line-height: 26px;
  }

  .rj-label {
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    font-weight: 600;
    display: inline-block;
    text-align: right;
  }

  .rj-text {
    color: #606266;
    font-size: inherit;
    padding: 0 15px;
    font-size: 14px;
    display: inline-block;
  }

  .modalform .el-form-item {
    margin-bottom: 0 !important;
  }
  .modalinput {
    width: 260px !important;
  }
</style>
